<template>
  <!-- 增加修改 -->
  <a-drawer
    width="50%"
    :title="formTitle"
    :label-col="4"
    :wrapper-col="14"
    :visible="open"
    :body-style="{ height: 'calc(100vh - 100px)', overflow: 'auto' }"
    @close="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
        <a-row>
          <a-col :span="8">
            <a-form-item label="选择业务城市" prop="city">
              <a-tree
                v-model="form.city"
                checkable
                :load-data="onLoadData"
                :tree-data="treeData"
                :expanded-keys="cityexpandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                @expand="onExpand"
                @select="onSelect"
              />
            </a-form-item>
          </a-col>
          <a-col :span="16"
            ><a-row class="form-row" :gutter="32">
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="选择公司" prop="companyId">
                  <a-select
                    placeholder="请选择用户所属公司"
                    v-model="form.companyId"
                    style="width: 100%"
                    allow-clear
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    show-search
                  >
                    <a-select-option
                      v-for="(d, index) in companyListAll"
                      :key="index"
                      :value="d.id"
                      >{{ d.companyName }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="姓名" prop="name">
                  <a-input v-model="form.name" placeholder="请输入姓名" />
                </a-form-model-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="登录名" prop="">
                  <a-input v-model="form.userName" placeholder="请输入登录名" />
                </a-form-model-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="手机号" prop="phonenumber">
                  <a-input
                    v-model="form.phonenumber"
                    placeholder="请输入手机号"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="所属部门" prop="deptId">
                  <select-dept v-model="form.deptId" select-model="single" />
                </a-form-model-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="岗位" prop="postIds">
                  <a-select
                    mode="multiple"
                    v-model="form.postIds"
                    placeholder="请选择"
                    option-filter-prop="children"
                  >
                    <a-select-option
                      v-for="(d, index) in postOptions"
                      :key="index"
                      :value="d.id"
                    >
                      {{ d.postName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>

              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="角色" prop="roleIds">
                  <a-select
                    mode="multiple"
                    v-model="form.roleIds"
                    placeholder="请选择"
                    option-filter-prop="children"
                  >
                    <a-select-option
                      v-for="(d, index) in roleOptions"
                      :key="index"
                      :value="d.id"
                    >
                      {{ d.roleName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="密码" prop="password">
                  <a-input-password
                    v-model="form.password"
                    placeholder="请输入(默认123456)"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :lg="12" :md="24" :sm="24">
                <a-form-model-item label="企业微信用户ID" prop="userPinyin">
                  <a-input v-model="form.userPinyin" disabled />
                  <a-button type="link" @click="getWxUserId">
                    点击获取最新企微用户ID
                  </a-button>
                  <a-tooltip>
                    <template slot="title">
                      若手机号码变更，请点击获取最新用户ID
                    </template>
                    <a-icon type="question-circle" style="color: red" />
                  </a-tooltip>
                </a-form-model-item>
              </a-col>

              <a-col :lg="24" :md="24" :sm="24" :span="24">
                <a-form-model-item label="业务区域" prop="city">
                  <a-select
                    mode="multiple"
                    v-model="form.city"
                    style="width: 100%"
                    option-filter-prop="children"
                    disabled
                  >
                    <a-select-option
                      v-for="(d, index) in treeData"
                      :key="index"
                      :value="d.title"
                    >
                      {{ d.title }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24">
                <a-form-model-item label="状态" prop="status">
                  <a-radio-group v-model="form.status" button-style="solid">
                    <a-radio-button
                      v-for="(d, index) in statusOptions"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-radio-button
                    >
                  </a-radio-group>
                </a-form-model-item>
              </a-col>

              <a-col :lg="12" :md="12" :sm="24" v-if="form.status == 1">
                <a-form-model-item label="交接部门" prop="toDeptId">
                  <a-tree-select
                    v-model="form.toDeptId"
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="deptOptions"
                    placeholder="请选择交接部门"
                    :replaceFields="{
                      children: 'children',
                      title: 'menuName',
                      key: 'id',
                      value: 'id',
                    }"
                    @change="onMenuTreeChange"
                    allow-clear
                  >
                  </a-tree-select>
                </a-form-model-item>
              </a-col>
              <a-col :lg="12" :md="12" :sm="24" v-if="form.status == 1">
                <a-form-model-item label="交接经理" prop="toUserId">
                  <a-select
                    placeholder="请选择交接经理"
                    v-model="form.toUserId"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                  >
                    <a-select-option
                      v-for="d in userNamesList"
                      :key="d.name"
                      :value="d.id"
                      >{{ d.name }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row></a-col
          >
        </a-row>
      </a-spin>
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" @click="submitForm" :loading="loading">
            保存
          </a-button>
          <a-button type="dashed" @click="cancel"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import sysUserForm from "./SysUserForm";
export default {
  ...sysUserForm,
};
</script>
<style lang="less">
//修复抽屉控件没有遮罩时不显示问题
.ant-drawer-left.ant-drawer-open.no-mask,
.ant-drawer-right.ant-drawer-open.no-mask {
  width: 55%;
}
.no-mask .ant-drawer-content-wrapper,
.no-mask .ant-drawer-content-wrapper {
  width: 100% !important;
}
</style>
